<!--
 * @Author: anxia.ack anchenkai@come-future.com
 * @Date: 2025-05-07 22:17:01
 * @LastEditors: anxia.ack anchenkai@come-future.com
 * @LastEditTime: 2025-05-07 22:44:10
 * @FilePath: /free-learning/src/views/consultant-review/my-review/index.vue
 * @Description: 我的评价页面
-->
<template>
  <div class="my-review">
    <div class="page-header">
      <h1>我的评价</h1>
    </div>

    <!-- 评价列表 -->
    <div class="review-card">
      <el-table :data="reviewList" border>
        <el-table-column label="评价用户" width="150">
          <template #default="{ row }">
            <div class="user-info">
              <el-avatar :size="30" :src="row.avatar" />
              <span>{{ row.nickName }}</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="rating" label="评分" min-width="200">
          <template #default="{ row }">
            <my-rate :model-value="String(row.rating)" disabled />
          </template>
        </el-table-column>
        <el-table-column prop="comment" label="评价内容" min-width="200" show-overflow-tooltip />
        <el-table-column prop="reviewTime" label="评价时间" min-width="180" />
        <el-table-column prop="status" label="状态" width="100">
          <template #default="{ row }">
            <el-tag :type="getStatusType(row.status)" effect="light">
              {{ getStatusText(row.status) }}
            </el-tag>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <div class="pagination">
        <el-pagination
          v-model:current-page="page.current"
          v-model:page-size="page.size"
          :total="page.total"
          :page-sizes="[10, 20, 50, 100]"
          layout="total, sizes, prev, pager, next"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from "vue";
import { ElMessage } from "element-plus";
import * as consultantReviewApi from "@/api/consultant_review";
import type { ConsultantReview } from "@/api/consultant_review/type";
import MyRate from "@/layout/components/MyRate.vue";
import { useUserStore } from "@/store";

defineOptions({
  name: "MyReview",
});

// 分页数据
const page = reactive({
  current: 1,
  size: 10,
  total: 0,
});

// 评价列表
const reviewList = ref<ConsultantReview[]>([]);

// 获取评价列表
const getReviewList = async () => {
  try {
    const res = await consultantReviewApi.page({
      current: page.current,
      size: page.size,
      consultantId: useUserStore().userInfo.userId,
      status: 1,
    });
    reviewList.value = res.records || [];
    page.total = res.total || 0;
  } catch (error) {
    ElMessage.error("获取评价列表失败");
  }
};

// 分页操作
const handleSizeChange = (val: number) => {
  page.size = val;
  getReviewList();
};

const handleCurrentChange = (val: number) => {
  page.current = val;
  getReviewList();
};

// 状态相关
const getStatusType = (status: number): "warning" | "success" | "danger" => {
  const map: Record<number, "warning" | "success" | "danger"> = {
    0: "warning",
    1: "success",
    2: "danger",
  };
  return map[status];
};

const getStatusText = (status: number) => {
  const map: Record<number, string> = {
    0: "待审核",
    1: "已通过",
    2: "已拒绝",
  };
  return map[status];
};

onMounted(() => {
  getReviewList();
});
</script>

<style lang="scss" scoped>
.my-review {
  padding: 20px;

  .page-header {
    margin-bottom: 20px;
    h1 {
      font-size: 24px;
      font-weight: 500;
      margin: 0;
    }
  }

  .review-card {
    background: #fff;
    padding: 20px;
    border-radius: 4px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  }

  .audit-info {
    color: #f56c6c;
  }

  .pagination {
    margin-top: 20px;
    display: flex;
    justify-content: flex-end;
  }
}
.user-info {
  display: flex;
  align-items: center;
  gap: 10px;
}
</style>
